<template>
  <div class="page home">
    <div class="content">
      <!-- <div class="message-box">
        <div class="message-content">
          你好小度
        </div>
      </div> -->
      <div
        :class="item.user === '0' ? 'message-box ai' : 'message-box you'"
        v-for="(item, index) in state.content"
        :key="index"
      >
        <div class="message-content">{{ item.context }}</div>
      </div>
    </div>
    <div class="input-content">
      <div class="input-frame">
        <textarea
          class="input-area"
          autofocus
          maxlength="5000"
          placeholder="请输入内容"
          :value="inputValue"
          @blur="inputChange"
        ></textarea>
      </div>
      <div class="send">
        <span class="iconfont-box" @click="onClickSend">
          <span class="iconfont">&#xe60d;</span>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import { reactive, ref } from "vue";
import http from "../util/request";
import dayjs from "dayjs";
export default {
  name: "HomeView",
  setup(props, ctx) {
    const inputValue = ref();
    const cid = ref(""); //上下文通用 上一次的cid
    const state = reactive({
      content: [
        {
          dateTime: "2023-12-12 11:11:49",
          user: "1",
          context: "你好，小度！",
        },
        {
          dateTime: "2023-12-12 11:12:49",
          user: "0",
          context: "你好，我是你的ai助手",
        },
      ],
    });

    const onClickSend = () => {
      http.post({
        url: "https://api.devbit.cn/ai/api/ai/chat",
        params: {
          prompt:
            "请扮演一个解决方案专家，无论我提出什么问题，请直接给出方案，不要有其他多余的文字",
          question: inputValue.value,
          cid: cid.value,
          stream: false,
        },
        before: () => {},
        success: (res) => {
          console.log("答案：", res);
        },
        failure: (msg) => {
          console.log("错误", msg);
        },
        complete: () => {},
      });
      // http.getStream({
      //   before: () => {
      //     console.log("即将发送");
      //     const object = {
      //       dateTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      //       user: "1",
      //       context: inputValue.value,
      //     };
      //     console.log("输入的内容", inputValue.value);

      //     let newList = state.content;
      //     newList.push(object);
      //     state.content = newList;
      //     inputValue.value = "";
      //   },
      //   params: {
      //     prompt:
      //       "请扮演一个解决方案专家，无论我提出什么问题，请直接给出方案，不要有其他多余的文字",
      //     question: inputValue.value,
      //     cid: cid.value,
      //     stream: true,
      //   },
      //   success: (res) => {
      //     console.log(res);
      //   },
      //   failure: (msg) => console.log("失败", msg),
      //   complate: () => {},
      // });
    };
    const inputChange = (e) => {
      inputValue.value = e.target.value;
    };
    return {
      inputValue,
      state,
      onClickSend,
      inputChange,
    };
  },
};
</script>

<style scoped lang="scss" src="./HomeView.scss"></style>
